<template>
  <div id="pdfDom">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">{{ title }}-持续交付月报</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row> 
    <div class="newReport" ref="top">
      <el-button v-show="!inputStatus" @click="edit" type="primary" icon="el-icon-edit">编辑</el-button>
      <el-button v-show="inputStatus" @click="initSave" type="primary" icon="el-icon-check">保存</el-button>
      <el-button @click="getPdf(comMonth)" type="primary" icon="el-icon-success">导出PDF</el-button>
    </div>  
    <div>
      <transition name="fade">
        <div v-show="isShowTop" class="toTop" @click="toTop">
          <el-image
            style="width: 50px; height: 50px"
            :src="imgUrl"
            fit="cover"></el-image>
        </div>
      </transition>  
      <el-divider content-position="left">月报总结</el-divider>
      <div v-if="!inputStatus" class="" style="padding: 0 20px">
        <el-tag size="medium" v-if="this.content">{{ this.content }}</el-tag>
        <el-tag size="medium" v-else>您暂未总结！</el-tag>
      </div>
      <div v-else>
        <el-input     
          class="marT"
          type="textarea"
          maxlength="1000"                                    
          placeholder="请输入您的总结"
          v-model="content">
        </el-input>
      </div>
      <el-divider content-position="left">项目导入情况</el-divider>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="total">
            <el-card class="marT box-card m-b" style="margin-bottom: 20px;" shadow="never">
              <div slot="header" class="clearfix">
                  <div style="float: left; padding: 10px 0">项目新增导入趋势</div>                              
              </div>
              <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                  <ve-line
                    :data="lineChartData"
                    :settings="lineChartSettings"
                    :legend-visible="true"             
                    :data-zoom="dataZoom"
                  ></ve-line>                                        
                </el-col>
              </el-row>
              <el-input
                v-if="inputStatus"
                class="marT"
                type="textarea"
                maxlength="1000"                                    
                placeholder="请输入您的总结"
                v-model="project_suggest">
              </el-input>
              <el-tag size="small" v-else>{{ project_suggest }}</el-tag>
            </el-card>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="12">
          <div class="total">
            <el-card class="marT box-card m-b" style="margin-bottom: 20px;" shadow="never">
              <div slot="header" class="clearfix">
                  <div style="float: left; padding: 10px 0">devops各系统新增导入趋势</div>                              
              </div>
              <el-row>
                <el-col :xs="24" :sm="24" :lg="24">
                  <ve-line           
                    :data="devops_month_trend"
                    :settings="settings"                                
                    :data-empty="devopsLineEmpty"
                    :loading="devopsLineLoading"
                    :data-zoom="dataZoom">
                  </ve-line>                             
                </el-col>
              </el-row>
              <el-input
                v-if="inputStatus"
                class="marT"
                type="textarea"
                maxlength="1000"                                    
                placeholder="请输入您的总结"
                v-model="devops_suggest">
              </el-input>
              <el-tag size="small" v-else>{{ devops_suggest }}</el-tag>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-divider content-position="left">研发质量</el-divider>     
      <div class="marT chart-area">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="padding: 10px 0">任务延期率</div>         
              </div>
              <ve-line
                class="bgColor"
                :colors="color" 
                :data="overdueData" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>

              <div class="explain">说明:研发需求分解任务的实施延期情况</div>
          </el-card>
            
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">git log检查一次通过率</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="git_log_pass_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
              <div class="explain">说明:代码提交规范检查一次通过情况</div>
          </el-card>
            
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">圈复杂度</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="complexityData" 
                :extend="chartComplexity"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:圈复杂度反应代码设计质量，圈复杂度大说明程序代码可能质量低且难于测试和维护</div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div class="marT chart-area">
        <el-row :gutter="10">        
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">评审缺陷密度</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="defectData" 
                :extend="chartDefectDensity"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:每千行代码的评审反馈意见数，可以体现出研发的代码质量</div>
            </el-card>
          </el-col>  

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">评审有效比率</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="effectiveData" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
                <div class="explain">说明:能够体现出有效评审的提交比例，对代码质量提升有帮助</div>
            </el-card>         
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">Bug degrade比例</div>
                </div>
                <ve-line
                  class="bgColor"
                  :colors="color" 
                  :data="bug_degrade_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
                <div class="explain">说明:回退/降级问题的占比</div>
            </el-card>         
          </el-col>
        </el-row>
      </div>

      <!-- <div class="marT chart-area">
        <el-row :gutter="10">
                   
        </el-row>
      </div> -->

      <div class="marT chart-area">
        <el-row :gutter="10">   
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">Bug 超期未解决比例</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="bug_overtime_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>
                <div class="explain">说明:未在计划时间内解决的缺陷占比</div>
            </el-card>         
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">无效Bug比例</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="invalid_bug_rate" 
                  :extend="chartExtend"
                  :settings="chartSettings">
                </ve-line>         
            </el-card>         
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
                <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">日自动化测试执行次数(DB)</div>
                </div>
                <ve-line
                  class="bgColor" 
                  :colors="color"
                  :data="day_daily_test_count" 
                  :extend="chartComplexity"
                  :settings="chartSettings2">
                </ve-line>
                <div class="explain">说明:次数越多代表有更多项目导入自动化测试，提升研发效率和质量</div>
            </el-card>
            
          </el-col>           
        </el-row>
      </div>

      <div class="marT chart-area">
        <el-row :gutter="10">          
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">日自动化测试执行次数(VB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="day_verify_test_count" 
                :extend="chartComplexity"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:次数越多代表有更多项目导入自动化测试，提升研发效率和质量</div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <div ref="quality" class="quality-table">
        <el-row class="bgColor marT">
          <el-col :xs="24" :sm="24" :lg="24">              
              <div class="table mar">
                <el-table
                  :data="qualityData"
                  :row-class-name="tableRowClassName"
                  :header-cell-style="{background:'#eef1f6'}"
                  style="width: 100%">
                  <el-table-column
                      align="center"
                      type="index"                                
                      label="编号"
                      width="40">
                      <template slot-scope="scope">
                          <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                      </template>
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="分类"
                      prop="classify"
                      width="120"
                      >                   
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="统计指标"
                      prop="name"
                      width="150">
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="公司目标"
                      width="120"
                      >
                      <template slot-scope="scope">
                        <div v-if="scope.row.company_indicator.value != 0">
                          <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        </div>
                        <div v-else></div>
                      </template>
                  </el-table-column>
                  <el-table-column :label="labelChoose + '平均'" align="center">
                    <el-table-column
                        v-for="(item, idx) in qualityTable[0]" 
                        :key="idx"                         
                        align="center"
                        :label="item.month"
                        width="120"
                        >
                        <template slot-scope="scope">                  
                          <div>
                            <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                            <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                          </div>
                        </template>
                    </el-table-column>
                  </el-table-column>

                  <el-table-column                     
                    fixed="right"
                    label="分析/建议"
                    align="center">
                    <template slot-scope="scope"> 
                      <el-input
                        v-if="inputStatus"
                        class="marT"
                        type="textarea"
                        maxlength="1000"                                    
                        placeholder="请输入您的总结"
                        v-model="scope.row.comments">
                      </el-input>                       
                      <div v-else style="text-align: left;">{{ scope.row.comments }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
          </el-col>
        </el-row>
      </div>
      
      <el-divider content-position="left">研发效率</el-divider>
      <el-row class="marT" :gutter="10">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">代码生产率(Patch)</div>
            </div>
            <ve-line
              class="bgColor" 
              :colors="color"
              :data="patchData" 
              :extend="chartComplexity"
              :settings="chartSettings2">
            </ve-line>
            <div class="explain">说明:人均每日提交代码改动（Patch）数量 ；代码生产率（有效代码行数/人天）：人均每日提交代码行数</div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">代码生产率(有效代码行数)</div>
            </div>
            <ve-line
              class="bgColor" 
              :colors="color"
              :data="effectiveCodeData" 
              :extend="chartComplexity"
              :settings="chartSettings2">
            </ve-line>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">缺陷解决效率(日平均)</div>
            </div>
            <ve-line
              class="bgColor" 
              :colors="color"
              :data="bugfixEffectData" 
              :extend="chartComplexity"
              :settings="chartSettings2">
            </ve-line>
            <div class="explain">说明:人均每天解决问题的数量</div>
          </el-card>
        </el-col>
      </el-row>

      <el-row class="marT" :gutter="10">      
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">缺陷解决时长(日平均)</div>
            </div>
            <ve-line
              class="bgColor"
              :colors="color" 
              :data="bugfixCostData" 
              :extend="chartComplexity"
              :settings="chartSettings2">
            </ve-line>
            <div class="explain">说明:平均每个缺陷的解决时长</div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">平均构建时长(DB)</div>
            </div>
            <ve-line
              class="bgColor" 
              :colors="color"
              :data="avg_daily_duration" 
              :extend="chartTime"
              :settings="chartSettings2">
            </ve-line>
            <div class="explain">说明:构建时长能反应出编译效率，VB时长的缩短能提升研发效率；DB和RB时长的缩短能提高版本发布效率</div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">平均构建时长(RB)</div>
            </div>
            <ve-line
              class="bgColor" 
              :colors="color"
              :data="avg_release_duration" 
              :extend="chartTime"
              :settings="chartSettings2">
            </ve-line>
            <div class="explain">说明:构建时长能反应出编译效率，VB时长的缩短能提升研发效率；DB和RB时长的缩短能提高版本发布效率</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- <div class="marT">
        <el-row :gutter="10">
          
        </el-row>
      </div> -->

      <div class="marT">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建时长(VB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="avg_verify_duration" 
                :extend="chartTime"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:构建时长能反应出编译效率，VB时长的缩短能提升研发效率；DB和RB时长的缩短能提高版本发布效率</div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建等待时长(DB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="avg_daily_queue_time" 
                :extend="chartTime"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:反映服务器的压力，等待时间长说明服务器压力大或者资源紧张，影响研发效率</div>
            </el-card>
          </el-col> 

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建等待时长(RB)</div>
              </div>
              <ve-line
                class="bgColor"
                :colors="color" 
                :data="avg_release_queue_time" 
                :extend="chartTime"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:反映服务器的压力，等待时间长说明服务器压力大或者资源紧张，影响研发效率</div>
            </el-card>
          </el-col>         
        </el-row>
      </div>
      <div class="marT">
        <el-row :gutter="10">      
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建等待时长(VB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="avg_verify_queue_time" 
                :extend="chartTime"
                :settings="chartSettings2">
              </ve-line>
              <div class="explain">说明:反映服务器的压力，等待时间长说明服务器压力大或者资源紧张，影响研发效率</div>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建成功率(DB)</div>
              </div>
              <ve-line
                class="bgColor"
                :colors="color" 
                :data="avg_daily_success_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
              <div class="explain">说明:构建成功率能反应代码质量，当然，也会有编译环境和工具等因素的影响</div>
            </el-card>
          </el-col>
     
          <el-col :xs="24" :sm="24" :lg="8">
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                <div style="float: left; padding: 10px 0">平均构建成功率(RB)</div>
              </div>
              <ve-line
                class="bgColor" 
                :colors="color"
                :data="avg_release_success_rate" 
                :extend="chartExtend"
                :settings="chartSettings">
              </ve-line>
              <div class="explain">说明:构建成功率能反应代码质量，当然，也会有编译环境和工具等因素的影响</div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- <div class="marT">
        <el-row :gutter="10">
          
        </el-row>
      </div> -->
      
      <el-row class="marT" :gutter="10">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">平均构建成功率(VB)</div>
            </div>
            <ve-line
              class="bgColor"
              :colors="color" 
              :data="avg_verify_success_rate" 
              :extend="chartExtend"
              :settings="chartSettings">
            </ve-line>
            <div class="explain">说明:构建成功率能反应代码质量，当然，也会有编译环境和工具等因素的影响</div>
          </el-card>
        </el-col>
      </el-row>

      <div class="efficient-table">
        <el-row class="bgColor marT">
          <el-col :xs="24" :sm="24" :lg="24">
              <div class="table mar">
                <el-table
                  :data="efficientData"
                  :row-class-name="tableRowClassName"
                  :header-cell-style="{background:'#eef1f6'}"
                  style="width: 100%">
                  <el-table-column
                      align="center"
                      type="index"                                
                      label="编号"
                      width="60">
                      <template slot-scope="scope">
                          <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                      </template>
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="分类"
                      prop="classify"
                      width="120"
                      >                   
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="统计指标"
                      prop="name"
                      width="150">
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="公司目标"
                      width="120"
                      >
                      <template slot-scope="scope">
                        <div v-if="scope.row.company_indicator.value != 0">
                          <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        </div>
                        <div v-else></div>
                      </template>
                  </el-table-column>
                  <el-table-column :label="labelChoose + '平均'" align="center">
                  <el-table-column
                      v-for="(item, idx) in efficientTable[0]" 
                      :key="idx"                         
                      align="center"
                      :label="item.month"
                      width="120"
                      >
                      <template slot-scope="scope">
                        <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                        <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                      </template>
                  </el-table-column>
                  </el-table-column>
                  <el-table-column                     
                    fixed="right"                        
                    label="分析/建议"
                    align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-if="inputStatus"
                        class="marT"
                        type="textarea"
                        maxlength="1000"                                    
                        placeholder="请输入您的总结"
                        v-model="scope.row.comments">
                      </el-input>
                      <div v-else style="text-align: left;">{{ scope.row.comments }}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
          </el-col>
        </el-row>
      </div>

      <el-divider content-position="left">客户满意度</el-divider>
      <el-row class="marT" :gutter="10">
        <el-col :xs="24" :sm="24" :lg="12">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">投诉件数</div>
            </div>
            <ve-line
              class="bgColor"
              :colors="color" 
              :data="customer_complaint" 
              :extend="chartComplaint"
              :settings="chartSettings2">
            </ve-line>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="12">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">投诉关闭率</div>
            </div>
            <ve-line
              class="bgColor"
              :colors="color" 
              :data="complaint_closed_rate" 
              :extend="chartExtend"
              :settings="chartSettings">
            </ve-line>
          </el-card>
        </el-col>
      </el-row>

      <div class="complaint-table">
        <el-row class="bgColor marT">
          <el-col :xs="24" :sm="24" :lg="24">              
              <div class="table mar">
                <el-table
                  :data="complaintData"
                  :row-class-name="tableRowClassName"
                  :header-cell-style="{background:'#eef1f6'}"
                  style="width: 100%">
                  <el-table-column
                      align="center"
                      type="index"                                
                      label="编号"
                      width="60">
                      <template slot-scope="scope">
                          <span>{{ scope.$index + 1 + qualitySize*(qualityCurrent - 1) }}</span> 
                      </template>
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="分类"
                      prop="classify"
                      width="120">                   
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="统计指标"
                      prop="name"
                      width="150">
                  </el-table-column>

                  <el-table-column 
                      align="center"
                      label="公司目标"
                      width="120">
                      <template slot-scope="scope">
                        <div v-if="scope.row.company_indicator.value != 0">
                          <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                          <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}</span>
                        </div>
                        <div v-else-if="scope.row.name == '投诉件数' && scope.row.company_indicator.value != 0">
                          <span v-if="scope.row.company_indicator.operator == 0">> {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                          <span v-else-if="scope.row.company_indicator.operator == 1">< {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                          <span v-else-if="scope.row.company_indicator.operator == 2">>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                          <span v-else-if="scope.row.company_indicator.operator == 3"><= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                          <span v-else>= {{ formatter(scope.row.type, scope.row.company_indicator.value) }}(每个事业群)</span>
                        </div>
                        <div v-else></div>
                      </template>
                  </el-table-column>
                  <el-table-column :label="labelChoose + '平均'" align="center">
                  <el-table-column
                      v-for="(item, idx) in complaintTable[0]" 
                      :key="idx"                         
                      align="center"
                      :label="item.month"                        
                      width="120">
                      <template slot-scope="scope">
                        <span style="color: green;" v-if="scope.row.group_indicator[idx].reach_standard">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                        <span v-else style="color: red;">{{ formatter(scope.row.type, scope.row.group_indicator[idx].value) }}</span>
                      </template>
                  </el-table-column>
                  </el-table-column>
                  <el-table-column                      
                    fixed="right"                        
                    label="分析/建议"
                    align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-if="inputStatus"
                        class="marT"
                        type="textarea"
                        maxlength="1000"                                    
                        placeholder="请输入您的总结"
                        v-model="scope.row.comments">
                      </el-input>
                      
                      <div v-else style="text-align: left;">{{ scope.row.comments}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
          </el-col>
        </el-row>
      </div>        
    </div>  
  </div>
</template>

<script>
import { getHeader } from '@/app.config'
import { removeToken, removeName } from '@/utils/auth'
import http from '@/views/sys/axios'
import htmlToPdf from '@/utils/buildPdf'
import Vue from 'vue'
Vue.use(htmlToPdf)

export default {
  data() {
    this.chartExtend = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {  
              return (data.value[1]*100).toFixed(2) + '%'            
              // if(data.seriesName == '圈复杂度' || data.seriesName == '评审有效比率') {
              //   return data.value[1]
              // } else if(data.seriesName == '评审缺陷密度') {
              //   return data.value[1] + '个/KLOC'
              // } else if(data.seriesName == '日自动化测试执行次数(VB)' || data.seriesName == '日自动化测试执行次数(DB)') {
              //   return data.value[1] + '次'
              // } else if(data.seriesName == '代码生产率(Patch)' || data.seriesName == '缺陷解决效率(每天平均)') {
              //   return data.value[1] + '个/天'
              // } else if(data.seriesName == '代码生产率(有效代码行数)') {
              //   return data.value[1] + '行/天'
              // } else if(data.seriesName == '缺陷解决时长(每件平均)') {
              //   return data.value[1] + '天/个'
              // } else if(data.seriesName == '平均构建时长(VB)' || data.seriesName == '平均构建时长(DB)' || data.seriesName == '平均构建时长(RB)' || data.seriesName == '平均构建等待时长(VB)' || data.seriesName == '平均构建等待时长(DB)' || data.seriesName == '平均构建等待时长(RB)') {
              //   return this.formatter('time', data.value[1])                
              // } else if(data.seriesName == '投诉件数') {
              //   return data.value[1] + '件'
              // } else {
              //   console.log(data)
                
              // }                         
            }
          }
        }
      }
    }
    this.chartComplexity = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {  
              return data.value[1]                                                 
            }
          }
        }
      }
    }
    this.chartDefectDensity  = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {  
              return data.value[1]                                                
            }
          }
        }
      }
    }
    this.chartTime = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) { 
              let value = data.value[1]
              if (isNaN(value)) {
                value = 0
              }
              let theTime = parseInt(value) // 秒
              let theTime1 = 0 // 分
              let theTime2 = 0 // 小时
              let theTime3 = 0 // 天
              if (theTime > 60) {
                theTime1 = parseInt(theTime / 60)
                theTime = parseInt(theTime % 60)
                if (theTime1 > 60) {
                  theTime2 = parseInt(theTime1 / 60)
                  theTime1 = parseInt(theTime1 % 60)
                  if (theTime2 > 24) {
                    theTime3 = parseInt(theTime2 / 24)
                    theTime2 = parseInt(theTime2 % 24)
                  }
                }
              }
              let result = '' + parseInt(theTime) + '秒'
              if (theTime1 > 0) {
                result = '' + parseInt(theTime1) + '分' + result
              }
              if (theTime2 > 0) {
                result = '' + parseInt(theTime2) + '时' + result
              }
              if (theTime3 > 0) {
                result = '' + parseInt(theTime3) + '天' + result
              } 
              return result                                                         
            }
          }
        }
      }
    }
    this.chartComplaint = {
      series: {      
        itemStyle : { 
          normal: {
            label : {
              show: true
            }
          }
        },
        label: {
          normal: {
            formatter: function(data) {               
              if(data.seriesName.indexOf('率') >= 0) {
                return (data.value[1]).toFixed(2) + '%'
              } else {
                return data.value[1] + '件'
              }                                                              
            }
          }
        }
      }
    }
    return {  
      devops_suggest: '',
      project_suggest: '', 
      id: this.$route.query.id,
      isShowTop: false, 
      inputStatus: false, 
      imgUrl: require('../../assets/top.png'),
      month: '', 
      targetValue: '任务延期率', // 趋势图选择
      targetData: {
        columns: ['month', 'company_indicator', 'actual_indicator'],
        rows: []
      },
      devops_month_trend: {
        columns: ['date', 'devops_new_counts', 'gerrit_new_counts', 'pms_new_counts', 'period_new_counts', 'customer_new_counts', 'autotest_new_counts', 'knowledge_community_counts'],
        rows: []
      },
      devopsLineLoading: false,
      devopsLineEmpty: false,
      overdueData: {
        columns: ['month', 'task_overdue_avg_project', 'task_overdue_avg_project_indicator'],
        rows: []
      },
      git_log_pass_rate: {
        columns: ['month', 'git_log_pass_rate', 'git_log_pass_rate_indicator'],
        rows: []
      },
      complexityData: {
        columns: ['month', 'avg_complexity', 'avg_complexity_indicator'],
        rows: []
      },
      defectData: {
        columns: ['month', 'defect_density', 'defect_density_indicator'],
        rows: []
      },
      effectiveData: {
        columns: ['month', 'effective_ratio', 'effective_ratio_indicator'],
        rows: []
      },
      bug_degrade_rate: {
        columns: ['month', 'bug_degrade_rate', 'bug_degrade_rate_indicator'],
        rows: []
      },
      bug_overtime_rate: {
        columns: ['month', 'bug_overtime_rate', 'bug_overtime_rate_indicator'],
        rows: []
      },
      invalid_bug_rate: {
        columns: ['month', 'invalid_bug_rate', 'invalid_bug_rate_indicator'],
        rows: []
      },
      day_daily_test_count: {
        columns: ['month', 'day_daily_test_count', 'day_daily_test_count_indicator'],
        rows: []
      },
      day_verify_test_count: {
        columns: ['month', 'day_verify_test_count', 'day_verify_test_count_indicator'],
        rows: []
      },   
      patchData: {
        columns: ['month', 'avg_daily_patch_count', 'avg_daily_patch_count_indicator'],
        rows: []
      },
      effectiveCodeData: {
        columns: ['month', 'avg_daily_effective_code', 'avg_daily_effective_code_indicator'],
        rows: []
      },
      bugfixEffectData: {
        columns: ['month', 'bugfix_effective', 'bugfix_effective_indicator'],
        rows: []
      },
      bugfixCostData: {
        columns: ['month', 'bugfix_cost', 'bugfix_cost_indicator'],
        rows: []
      },
      avg_daily_duration: {
        columns: ['month', 'avg_daily_duration', 'avg_daily_duration_indicator'],
        rows: []
      },
      avg_release_duration: {
        columns: ['month', 'avg_release_duration', 'avg_release_duration_indicator'],
        rows: []
      },
      avg_verify_duration: {
        columns: ['month', 'avg_verify_duration', 'avg_verify_duration_indicator'],
        rows: []
      },
      avg_daily_queue_time: {
        columns: ['month', 'avg_daily_queue_time', 'avg_daily_queue_time_indicator'],
        rows: []
      },
      avg_release_queue_time: {
        columns: ['month', 'avg_release_queue_time', 'avg_release_queue_time_indicator'],
        rows: []
      },
      avg_verify_queue_time: {
        columns: ['month', 'avg_verify_queue_time', 'avg_verify_queue_time_indicator'],
        rows: []
      },
      avg_daily_success_rate: {
        columns: ['month', 'avg_daily_success_rate', 'avg_daily_success_rate_indicator'],
        rows: []
      },
      avg_release_success_rate: {
        columns: ['month', 'avg_release_success_rate', 'avg_release_success_rate_indicator'],
        rows: []
      },
      avg_verify_success_rate: {
        columns: ['month', 'avg_verify_success_rate', 'avg_verify_success_rate_indicator'],
        rows: []
      },
      customer_complaint: {
        columns: ['month', 'customer_complaint', 'customer_complaint_indicator'],
        rows: []
      },
      complaint_closed_rate: {
        columns: ['month', 'complaint_closed_rate', 'complaint_closed_rate_indicator'],
        rows: []
      },
      settings: {
        labelMap: {
          count: '已导入项目(符合条件)',                    
          cover_rate: '导入覆盖率(%)',
          devops_new_counts: '持续集成系统(个)',
          pms_new_counts: '项目管理系统(个)',
          gerrit_new_counts: '代码管理系统(个)',
          period_new_counts: '阶段点评审系统(个)',
          customer_new_counts: '客户投诉系统(个)',
          autotest_new_counts: '自动化测试管理系统(个)',
          knowledge_community_counts: '知识社区(个)'
        }
      },
      dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
      }],
      chartSettings: {
        yAxisType: ['percent'],
        labelMap: {
          company_indicator: '公司目标值',
          actual_indicator: '任务延期率',
          task_overdue_avg_project: '实际值',
          task_overdue_avg_project_indicator: '目标值(<15%)',
          git_log_pass_rate: '实际值',
          git_log_pass_rate_indicator: '目标值(>99%)',
          avg_selfcheck_pass_rate_indicator: '目标值',
          defect_density: '实际值',
          effective_ratio: '实际值',
          effective_ratio_indicator: '目标值(>73%)',
          bug_degrade_rate: '实际值',
          bug_degrade_rate_indicator: '目标值(<7%)',
          bug_overtime_rate: '实际值',
          bug_overtime_rate_indicator: '目标值',
          invalid_bug_rate: '实际值',
          invalid_bug_rate_indicator: '目标值',
          avg_selfcheck_pass_rate: '实际值',
          day_verify_test_count: '实际值',
          day_daily_test_count: '实际值',
          avg_daily_patch_count: '实际值',
          avg_daily_effective_code: '实际值',
          bugfix_effective: '实际值',
          bugfix_cost: '实际值',
          avg_verify_success_rate: '实际值',
          avg_daily_success_rate: '实际值',
          avg_release_success_rate: '实际值',
          avg_verify_success_rate_indicator: '目标值(>98%)',
          avg_daily_success_rate_indicator: '目标值(>95%)',
          avg_release_success_rate_indicator: '目标值(=100%)',          
          complaint_closed_rate_indicator: '目标值(>75%)',
          complaint_closed_rate: '实际值'
        }
      },
      chartSettings2: {
        labelMap: {
          company_indicator: '公司目标值',
          actual_indicator: '任务延期率',
          task_overdue_avg_project: '实际值',
          git_log_pass_rate: '实际值',
          avg_complexity: '实际值',
          avg_complexity_indicator: '目标值(<15)',
          defect_density: '实际值(个/KLOC)',
          defect_density_indicator: '目标值(>11个/KLOC)',
          effective_ratio: '实际值',
          bug_degrade_rate: '实际值',
          bug_overtime_rate: '实际值',
          avg_selfcheck_pass_rate: '实际值',
          day_daily_test_count: '实际值',
          day_daily_test_count_indicator: '目标值(>1次)',
          day_verify_test_count: '实际值',
          day_verify_test_count_indicator: '目标值(>1次)',
          avg_daily_patch_count: '实际值(个/天)',
          avg_daily_patch_count_indicator: '目标值(个/天)',
          avg_daily_effective_code: '实际值(行/天)',
          avg_daily_effective_code_indicator: '目标值(行/天)',
          bugfix_effective: '实际值(个/天)',
          bugfix_effective_indicator: '目标值(>2.5个/天)',
          bugfix_cost: '实际值(天/个)',
          bugfix_cost_indicator: '目标值(<3天/个)',
          avg_verify_duration: '实际值',
          avg_verify_duration_indicator: '目标值(<5分0秒)',
          avg_daily_duration: '实际值',
          avg_daily_duration_indicator: '目标值(<45分0秒)',
          avg_release_duration: '实际值',
          avg_release_duration_indicator: '目标值(<4时0秒)',
          avg_verify_queue_time: '实际值',
          avg_daily_queue_time: '实际值',
          avg_release_queue_time: '实际值',
          avg_verify_queue_time_indicator: '目标值(<5分0秒)',
          avg_daily_queue_time_indicator: '目标值(<30分0秒)',
          avg_release_queue_time_indicator: '目标值(<30分0秒)',        
          customer_complaint: '实际值',
          customer_complaint_indicator: '目标值(<3)',          
        }
      },
      color: ['#409eff', '#42b983'],
      targetSelect: [],
      is_created: false,
      labelChoose: '集团',
      qualitySize: 10,
      qualityCurrent: 1,
      efficientData: [], // 研发效率数据
      efficientTable: [],
      complaintData: [], // 客户满意度数据
      complaintTable: [],
      qualityData: [], // 研发质量数据      
      selectedGroup: '', // 事业群选择
      groupId: '', // 事业群Id
      group_selector: [], // 事业群下拉初始数据
      qualityTable: [],
      content: '',
      time: this.$route.query.time,
      lineChartData: {
        columns: ['date', 'count'],
        rows: []
      },
      lineChartSettings: {
        labelMap: {'date': '月份', 'count': '数量(个)'}
      }
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    this.$nextTick(() => {        
    })
  },
  computed: {
    comMonth() {
      return `${this.month}-${this.$route.query.groupId}-持续交付月报`
    },
    title() {
      return `${this.month}-${this.$route.query.groupId}`
    }
  },
  methods: {
    toTop() {
      this.$refs.top.scrollIntoView({behavior: "smooth"})      
    },
    edit() {
      this.$refs.quality.scrollIntoView({behavior: "smooth"})
      this.isShowTop = true
      this.inputStatus = true
    },
    async save() {
      let data = this.qualityData.map(val => {
        var value 
        val.group_indicator.forEach((item, index) => {
          if(index == val.group_indicator.length - 1) {
            value = item.value
          }
        })
        return {
          classify: val.classify,
          name: val.name,
          values: value,
          comments: val.comments
        }
      })      
      let data1 =  this.efficientData.map(val => {
        let value 
        val.group_indicator.forEach((item, index) => {
          if(index == val.group_indicator.length - 1) {
            value = item.value
          }
        })
        data.push({
          classify: val.classify,
          name: val.name,
          values: value,
          comments: val.comments
        }) 
      })
      
      let data2 =  this.complaintData.map(val => {
        let value 
        val.group_indicator.forEach((item, index) => {
          if(index == val.group_indicator.length - 1) {
            value = item.value
          }
        })
        data.push({
          classify: val.classify,
          name: val.name,
          values: value,
          comments: val.comments
        })
      })      
      const obj = {
        detail_data: data,
        project_suggest: this.project_suggest,
        devops_suggest: this.devops_suggest,
        contents: this.content
      }
      return new Promise((resolve, reject) => {
        http.post(`/api/report/delivery/data?groupId=${this.$route.query.groupName}&time=${this.$route.query.time}`, obj)
        .then(res => {
          resolve(res)
        })
      })      
    },
    async initSave() {
      this.inputStatus = false
      let res = await this.save()
      if(res.code == 200) {
        this.$message({
          message: '保存成功，已入库!',
          type: 'success'
        });
        this.details()
      } else {
        this.$message({
          message: res.msg,
          type: 'warning'
        });
      }
    },
    formatter(type, value) { // 数据过滤器
      if(type === 'percent') {
        return Number(value * 100).toFixed(2) + '%' || '0.00%'
      } else if(type === 'time') {
        if (isNaN(value)) {
          value = 0
        }
        let theTime = parseInt(value) // 秒
        let theTime1 = 0 // 分
        let theTime2 = 0 // 小时
        let theTime3 = 0 // 天
        if (theTime > 60) {
          theTime1 = parseInt(theTime / 60)
          theTime = parseInt(theTime % 60)
          if (theTime1 > 60) {
            theTime2 = parseInt(theTime1 / 60)
            theTime1 = parseInt(theTime1 % 60)
            if (theTime2 > 24) {
              theTime3 = parseInt(theTime2 / 24)
              theTime2 = parseInt(theTime2 % 24)
            }
          }
        }
        let result = '' + parseInt(theTime) + '秒'
        if (theTime1 > 0) {
          result = '' + parseInt(theTime1) + '分' + result
        }
        if (theTime2 > 0) {
          result = '' + parseInt(theTime2) + '时' + result
        }
        if (theTime3 > 0) {
          result = '' + parseInt(theTime3) + '天' + result
        }
        return result
      } else if(type === 'KLOC') {
        return `${value}个/Kloc` || '0个/Kloc'
      } else if(type === '次') {
        return `${value}次` || '0次'
      } else if(type === '个/天') {
        return `${value}个/天` || '0个/天'
      } else if(type === '行/天') {
        return `${value}行/天` || '0行/天'
      } else if(type === '天/个') {
        return `${value}天/个` || '0天/个'
      } else {
        return value || 0
      }
    },
    getProjTrend() {
      http.get(`/api/base/project_stats?groupId=${this.$route.query.groupName}&time=${this.time}&type=report`)
      .then(res => {
        if(res.code === 200) {
          this.lineChartData.rows = res.imported_trend
        }
      })
    },
    getDevopsTable() {
      this.devopsLineLoading = true
      this.devops_month_trend.rows = []
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/qa/getsysimportinfo?groupId=${this.$route.query.groupName}&time=${this.time}`, {headers: getHeader()})
      .then(res => {
          if(res.status === 200) {
              if(res.data.code === 200) {
                  this.devopsLineLoading = false
                  res.data.asc_month_trend && res.data.asc_month_trend.length ? this.devopsLineEmpty = false : this.devopsLineEmpty = true
                  this.devops_month_trend.rows = res.data.asc_month_trend
              } else {
                  this.devopsLineLoading = true
                  this.devopsLineEmpty = true
              }
          }
      }).catch(error => {
          console.log(error)
      })
    },
    tableRowClassName(row, index) {
      row.index = index
    },
    lineFormatter(type, value) { // 表图数据过滤器
      if(type === 'percent') {
        return Math.round(value * 100) || 0.00
      } else if(type === 'time') {
        if (isNaN(value)) {
          value = 0
        }
        
        return value
      } else {
        return value || 0
      }
    },
    details() {
      http.get(`/api/report/delivery/${this.id}/detail`)
      .then(res => {
        if(res.code == 200) {
          this.content = res.contents
          console.log(this.content)
          this.project_suggest = res.project_suggest
          this.devops_suggest = res.devops_suggest
          this.overdueData.rows = res.indicator_trend.task_overdue_avg_project
          let monthItem = this.overdueData.rows.filter((item, index) => index === this.overdueData.rows.length - 1)  
          this.month = monthItem[0].month
          this.git_log_pass_rate.rows = res.indicator_trend.git_log_pass_rate
          this.complexityData.rows = res.indicator_trend.avg_complexity
          this.defectData.rows = res.indicator_trend.defect_density
          this.effectiveData.rows = res.indicator_trend.effective_ratio
          this.bug_degrade_rate.rows = res.indicator_trend.bug_degrade_rate
          this.bug_overtime_rate.rows = res.indicator_trend.bug_overtime_rate
          this.invalid_bug_rate.rows = res.indicator_trend.invalid_bug_rate
          this.day_daily_test_count.rows = res.indicator_trend.day_daily_test_count
          this.day_verify_test_count.rows = res.indicator_trend.day_verify_test_count
          this.patchData.rows = res.indicator_trend.avg_daily_patch_count
          this.effectiveCodeData.rows = res.indicator_trend.avg_daily_effective_code
          this.bugfixEffectData.rows = res.indicator_trend.bugfix_effective
          this.bugfixCostData.rows = res.indicator_trend.bugfix_cost
          this.avg_daily_duration.rows = res.indicator_trend.avg_daily_duration
          this.avg_release_duration.rows = res.indicator_trend.avg_release_duration
          this.avg_verify_duration.rows = res.indicator_trend.avg_verify_duration

          this.avg_daily_queue_time.rows = res.indicator_trend.avg_daily_queue_time
          this.avg_release_queue_time.rows = res.indicator_trend.avg_release_queue_time
          this.avg_verify_queue_time.rows = res.indicator_trend.avg_verify_queue_time
          this.avg_daily_success_rate.rows = res.indicator_trend.avg_daily_success_rate
          this.avg_release_success_rate.rows = res.indicator_trend.avg_release_success_rate
          this.avg_verify_success_rate.rows = res.indicator_trend.avg_verify_success_rate
          this.complaint_closed_rate.rows = res.indicator_trend.complaint_closed_rate
          this.customer_complaint.rows = res.indicator_trend.customer_complaint

          this.qualityData = res.table.develop_quality
          this.qualityTable = this.qualityData.map(item => {
            return item.group_indicator
          })
          this.efficientData = res.table.develop_efficient
          this.efficientTable = this.efficientData.map(item => {
            return item.group_indicator
          })
          this.complaintData = res.table.customer_satisfaction
          this.complaintTable = this.complaintData.map(item => {
            return item.group_indicator
          })      
        }
      })
    },
    initData() {
      this.getDevopsTable()
      this.details()
      this.getProjTrend()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .el-dialog {
    background-color: #eeeeee;
  }
  /deep/ .el-tag--medium{
    height: auto;
    line-height: 35px;
    width: 70%;
    white-space: pre-wrap;
  }
  /deep/ .el-tag--small{
    margin-top: 20px;
    height: auto;
    line-height: 35px;
    width: 100%;
    white-space: pre-wrap;
  }
  /deep/ .el-divider__text {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    background-color: #e6a23c;
    padding: 6px 16px;
  }
  /deep/ .el-divider--horizontal {
    margin: 40px 0;
    height: 2px;
  }
  #pdfDom{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .toTop{
    position: fixed;
    bottom: 80px;
    right: 25px;
    z-index: 10;
  }
  .newReport{
    position: absolute;
    top: 120px;
    right: 30px;
  }
  .edit{
    position: absolute;
    top: 120px;
    right: 100px;
  }
  .details{
    color: #1890ff;
    text-decoration: underline;
    cursor: pointer;
  }
  .choose{
      padding: 20px 0;
      .flex-box{
        display: flex;
        flex-wrap: nowrap;
        .flexEl{
          flex:1;
          margin: auto;           
        }
        .text-align{
          text-align: center;
        }
        .el{
          flex: 0 0 90%;
         }
      }
      .time{
        position: absolute;
        top: 20px;
        right: 41%;
        font-size: 14px;
        color: #606266;
      }
    }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
  .btn-group{
    text-align: right;
  }
  /deep/ .el-card{
    position: relative;
  }
  .explain{
    font-size: 12px;
    color: #e439;
    position: absolute;
    bottom: 10px;
    line-height: 24px;
    width: 100%;
    padding: 0 20px;
    right: 0;
  }
  .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
  .table{
      padding-bottom: 10px;
  }
</style>